D2: Vue.js在VSCode上的基本建置

2023 iThome 鐵人賽

DAY 2

Vue.js

從0開始學習30天可以到什麼程度？系列第 2 篇

15th鐵人賽

michellel

2023-09-17 21:55:36

664 瀏覽

分享至

今天要進行的是Vue.js在VSCode上的建置，並測試網頁是否能正常運作。

步驟 1：下載和安裝VSCode

前往VSCode的官方網站：https://code.visualstudio.com/
點擊下載按鈕，然後根據你的作業系統下載和安裝VSCode。

步驟 2：安裝VSCode上與Vue相關的擴展

VSCode有提供很多功能可以通過安裝來擴展，可以幫助我們更輕鬆地開發Vue.js應用程序。

安裝項目:

Live Server:
程式完成後才可在瀏覽器開啟。
Vetur:
這是Vue.js開發的官方擴展，提供了Vue模板和語法的支持。
Vue VSCode Snippets:
這個擴展提供了一些有用的Vue代碼片段，可以加速你的開發過程。

步驟 3：創建我的第一個使用Vue.js的網頁

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Beginning</title>
</head>
<body>
  <!-- Vue實體 -->
  <div id="app">
    {{ message }}
  </div>

  <!-- 引入Vue.js library -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!This is my first page using Vue.js!'
      }
    });
  </script>
</body>
</html>

完成畫面: